<template>
  <div class="case-assistance-container">
    <!-- 步骤导航 -->
    <div class="step-nav">
      <span
          :class="{ active: currentStep === 1 }"
          @click="goToStep(1)"
      >
        步骤1：案件类型
      </span>
      <span
          :class="{ active: currentStep === 2 }"
          @click="goToStep(2)"
      >
        步骤2：案情描述
      </span>
      <span
          :class="{ active: currentStep === 3 }"
          @click="goToStep(3)"
      >
        步骤3：提交材料
      </span>
    </div>

    <!-- 步骤内容 -->
    <div
        v-show="currentStep === 1"
        class="step-content"
        transition="slide"
    >
      <h3 class="step-title">案件类型</h3>
      <div class="radio-group">
        <input
            type="radio"
            id="civil"
            v-model="caseType"
            value="民事案件"
        />
        <label for="civil">民事案件</label>
      </div>
      <div class="radio-group">
        <input
            type="radio"
            id="criminal"
            v-model="caseType"
            value="刑事案件"
        />
        <label for="criminal">刑事案件</label>
      </div>
      <div class="radio-group">
        <input
            type="radio"
            id="administrative"
            v-model="caseType"
            value="行政案件"
        />
        <label for="administrative">行政案件</label>
      </div>
      <button
          class="btn btn-next"
          @click="nextStep"
      >
        下一步
      </button>
    </div>

    <div
        v-show="currentStep === 2"
        class="step-content"
        transition="slide"
    >
      <h3 class="step-title">案情描述</h3>
      <textarea
          v-model="caseDescription"
          class="textarea"
      ></textarea>
      <button
          class="btn btn-prev"
          @click="prevStep"
      >
        上一步
      </button>
      <button
          class="btn btn-next"
          @click="nextStep"
      >
        下一步
      </button>
    </div>

    <div
        v-show="currentStep === 3"
        class="step-content"
        transition="slide"
    >
      <h3 class="step-title">上传证据材料</h3>
      <input
          type="file"
          @change="handleFileChange"
          class="file-input"
          multiple
      />
      <!-- 显示文件列表 -->
      <ul>
        <li v-for="(file, index) in selectedFiles" :key="index">
          {{ file.name }}
          <button
              class="btn btn-delete"
              @click="deleteFile(index)"
          >
            删除
          </button>
        </li>
      </ul>
      <button
          class="btn btn-prev"
          @click="prevStep"
      >
        上一步
      </button>
      <button
          class="btn btn-submit"
          @click="submitApplication"
      >
        提交申请
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 当前步骤
const currentStep = ref(1);
// 案件类型
const caseType = ref('');
// 案情描述
const caseDescription = ref('');
// 选中文件列表
const selectedFiles = ref([]);

// 处理文件选择
const handleFileChange = (e) => {
  const files = Array.from(e.target.files);
  selectedFiles.value = [...selectedFiles.value, ...files];
};

// 前往指定步骤
const goToStep = (step) => {
  currentStep.value = step;
};

// 下一步
const nextStep = () => {
  if (currentStep.value < 3) {
    currentStep.value++;
  }
};

// 上一步
const prevStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--;
  }
};

// 删除文件
const deleteFile = (index) => {
  selectedFiles.value.splice(index, 1);
};

// 提交申请
const submitApplication = () => {
  console.log('案件类型:', caseType.value);
  console.log('案情描述:', caseDescription.value);
  console.log('上传文件:', selectedFiles.value.map(file => file.name));
  // 这里可添加实际提交表单到后端的逻辑，如使用axios等发送请求
};
</script>

<style scoped>
.case-assistance-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.step-nav {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  color: white;
  padding: 15px 0;
}

.step-nav span {
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.step-nav span.active {
  background-color: #4CAF50;
}

.step-content {
  flex: 1;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.step-title {
  font-size: 1.5em;
  margin-bottom: 15px;
}

.radio-group {
  margin-bottom: 10px;
}

.textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: vertical;
}

.file-input {
  margin-bottom: 10px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-prev {
  background-color: #ccc;
  color: #333;
  margin-right: 10px;
}

.btn-prev:hover {
  background-color: #bbb;
}

.btn-next {
  background-color: #3498db;
  color: white;
}

.btn-next:hover {
  background-color: #2980b9;
}

.btn-submit {
  background-color: #2ecc71;
  color: white;
}

.btn-submit:hover {
  background-color: #27ae60;
}

/* 删除按钮样式 */
.btn-delete {
  background-color: #e74c3c;
  color: white;
  margin-left: 10px;
}

.btn-delete:hover {
  background-color: #c0392b;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter-from {
  transform: translateY(100%);
}

.slide-leave-to {
  transform: translateY(-100%);
}
</style>